/*
* @Author: jh
* @Date: 2018/4/10
* @description: 系统 角色添加
*/
<template>
  <div>
     <el-dialog :title="id==='-1'?'添加角色':'编辑角色'" :visible=true center width="30%" :before-close="isShowAddFun" :close-on-click-modal=false :append-to-body=true>
        <el-form :model="form"  ref="form" label-width="100px" :rules="rules"  class="p-l-22 p-r-22">
            <el-form-item label="角色名称："  prop="roleName">
              <el-input v-model="form.roleName" auto-complete="off" :maxLength="10" placeholder="请输入角色名称"></el-input>
            </el-form-item>
            <el-form-item label="角色描述：" prop="remark">
                <el-input v-model="form.remark" type="textarea" :maxLength="100" placeholder="请输入角色描述"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" >
            <el-button @click="isShowAddFun" round>取 消</el-button>
            <el-button type="primary" @click="validationField('form')" round>提交</el-button>
        </div>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Component, Watch, Prop } from 'vue-property-decorator';
import RoleService from '../../../service/system-config/role';
import { SysRole } from '../../../api/Interface';
@Component({
  components: { }
})
export default class CompanyList extends Vue {
  // 初始化数据 相当于data
  public form: SysRole = {} as SysRole; 
  //  = { // 表单数据
  //   createTime: '', // 创建时间 ,
  //   createrId: '',  // 创建人 ,
  //   id: '',
  //   modifierId: '', // 编辑人 ,
  //   modifyTime: '', // 修改时间 ,
  //   remark: '',     // 备注 ,
  //   roleName: '',   // 角色名称 ,
  //   status: 0,      //
  // };
  public logoId: string = this.$store.state.user.uid; // 当前登陆者的id
  public dialogFormVisible: boolean = true; 
  public rules: object = {
      roleName: [
              { required: true, message: '请输入角色名称', trigger: 'blur' },
      ],
       remark: [
              { required: true, message: '请输入角色描述', trigger: 'blur' },
      ],
  };
  // refs
  public $refs: { };
  @Prop()
  public isShowAddFun: () => void;
  @Prop({default: '-1'})
  public id: string; // 角色id
  // watch
  @Watch('form')
  public onChildChanged(val: string, oldVal: string) {
    return val + '***';
  }

  // 声明周期钩子
  public mounted() {
     if ( this.id !== '-1' ) {
        this.getRole(); //获取角色详情
     }
  }
  public created() {
    // this.getList();
  }
    //验证字段
  public validationField(formName: string) {
      this.$refs[formName].validate((valid) => {
          if (valid) {
             this.addRole('form');
          } else {
            return;
          }
      });
  }
  // 重置表单
  public resetForm(formName: string) {
    this.$refs[formName].resetFields();
    }
  // 添加 && 编辑 角色
  public async addRole(formName: string) {
    if ( this.id === '-1' ) { // 添加
        this.form.createTime = new Date().getTime() + '';
        this.form.createrId = this.logoId;
        const res = await RoleService.sysRoleInsert(this.form);
        if (res.resCode === '0') {
             this.$emit('getList'); //重新获取列表数据
            this.$confirm('已保存至角色列表', '保存成功', {
                confirmButtonText: '继续操作',
                cancelButtonText: '返回列表页',
                type: 'success'
            }).then(() => {
                this.resetForm('form'); // 重置表单 
            }).catch(() => {
                this.isShowAddFun(); // 关闭弹框     
            });
        }
    } else {  // 编辑
        this.form.modifyTime = new Date().getTime() + '';
        this.form.modifierId = this.logoId;
        const res = await RoleService.sysRoleUpdate(this.form);
        if (res.resCode === '0') {
            this.$emit('getList'); // 重新获取列表数据  
            this.$confirm('已保存至角色列表', '保存成功', {
                confirmButtonText: '继续操作',
                cancelButtonText: '返回列表页',
                type: 'success'
            }).then(() => {
                this.getRole(); //获取角色详情
            }).catch(() => {
                this.isShowAddFun(); // 关闭弹框      
            });
        }   
    }
  }
  /**
   * 获取角色详情
   */
  public async getRole() {
    const params = {roleId: this.id};
    const res = await RoleService.sysRoleById(params);
    this.form = res;
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
